<template>
  <div v-loading="saveLoading" style="align-content: center;position: relative;margin-top:-20px">
    <el-tabs ref="tabs" v-model="tab" v-loading="loading" @tab-click="handleTabClick">
      <el-tab-pane :label="$t('资产负债表')" name="balance_sheet">
        <handEnter :key="balanceSheetKey" ref="balanceSheet" :sheet-data="uploadData.balanceSheet" :is-add="isAdd" :company-id="companyId" type="balance_sheet" />
      </el-tab-pane>
      <el-tab-pane :label="$t('利润表')" name="income_sheet">
        <handEnter :key="incomeSheetKey" ref="incomeSheet" :sheet-data=" uploadData.incomeSheet" :is-add="isAdd" :company-id="companyId" type="income_sheet" />
      </el-tab-pane>
      <el-tab-pane :label="$t('现金流量表')" name="cash_flow_sheet">
        <handEnter :key="cashFlowSheetKey" ref="cashFlowSheet" :sheet-data="uploadData.cashFlowSheet" :is-add="isAdd" :company-id="companyId" type="cash_flow_sheet" />
      </el-tab-pane>
      <el-tab-pane :label="$t('关键指标')" name="data_key">
        <handEnterDataKeys :key="handEnterDataKeysKey" ref="handEnterDataKeys" :is-add="isAdd" :company-id="companyId" :sheet-data="uploadData.dataKeys" />
      </el-tab-pane>
    </el-tabs>
    <div class="tabs_buttons">
      <el-button size="mini" @click="cancel">{{ $t('取消') }}</el-button>
      <el-button v-has-permi="['company:pcw:edit']" type="primary" size="mini" @click="save">{{ $t('确定') }}</el-button>
    </div>
  </div>
</template>

<script>
import handEnter from '@/views/company/pcw/handEnter'
import handEnterDataKeys from '@/views/company/pcw/handEnterDataKeys'
export default {
  name: 'HandUpload',
  components: { handEnter, handEnterDataKeys },
  props: {
     companyId: {
      type: String,
      required: true
    },
     isAdd: {
      type: Boolean,
      default: () => true,
      required: false
    },
     uploadData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      tab: 'balance_sheet',
      loading: false,
      balanceSheetKey: 0,
      incomeSheetKey: 0,
      cashFlowSheetKey: 0,
      handEnterDataKeysKey: 0,
      saveLoading: false
    }
  },
  created() {
      // console.log('uploadData', this.uploadData)
  },
  methods: {
    cancel() {
       this.$parent.$parent.handOpen = false
        this.$nextTick(() => {
            this.$refs.balanceSheet.initAddSubject()
            this.$refs.incomeSheet.initAddSubject()
            this.$refs.cashFlowSheet.initAddSubject()
          })
    },
    initData() {
         this.$nextTick(() => {
            this.$refs.balanceSheet.init()
            this.$refs.incomeSheet.init()
            this.$refs.cashFlowSheet.init()
            this.$refs.handEnterDataKeys.init()
            this.saveLoading = false
        })
    },
    save() {
          // 组装数据
        const balanceSheet = {
          sheetData: this.filterSheetData(this.$refs.balanceSheet.tableData)
        }
        const incomeSheet = {
          sheetData: this.filterSheetData(this.$refs.incomeSheet.tableData)
        }
        const cashFlowSheet = {
          sheetData: this.filterSheetData(this.$refs.cashFlowSheet.tableData)
        }
        const dataKeys = this.$refs.handEnterDataKeys.tableData
        const sheetData = { balanceSheet, incomeSheet, cashFlowSheet, dataKeys }
        // this.$parent.$parent.handOpen = false
        this.saveLoading = true
        this.$emit('save', sheetData)
    },
    // 过滤数据
    filterSheetData(sheetData) {
        const filterTable = sheetData.filter(sheetData => sheetData.subjectName !== undefined && sheetData.subjectName !== '')
        // console.log('filterTable', filterTable)
       // 如果这个数组对象字段subjectName有相同的值，那就后面元素的覆盖之前的元素
        const newData = filterTable.reduce((result, current) => {
        const existingElement = result.find(x => x.subjectName === current.subjectName)
        if (existingElement) {
          // 如果找到了相同的元素，就替换掉之前的元素
          const index = result.indexOf(existingElement)
          result.splice(index, 1, current)
        } else {
          // 如果没有找到相同的元素，就添加到 result 中
          result.push(current)
        }
        return result
      }, [])
      return newData
    },
     handleTabClick() {
        this.loading = true
         const that = this
        // 模拟了一个加载动画 解决el-table渲染卡顿问题
        setTimeout(function() {
           that.loading = false
        }, 500)
    }
  }
}
</script>

<style scoped lang="scss">
.tabs_buttons {
  position: absolute;
  right: 20px;
  top: 5px;
}
</style>
